<!-- news详情 -->
<template>
	<view>
		<view class="rich-wrap">
			<view class="title">{{ richText.title }}</view>
			<view class="info">
				<text>发布时间：{{richText.create_time}}</text>
				<text class="u-m-l-30">发布人：{{richText.publish_name}}</text>
			</view>

			<view class="content_box">
				<view v-if="richText.platform==0">
					<image :src="$IMG_URL+ richText.thumb" mode=""></image>
				</view>
				<u-parse :html="richText.content"></u-parse>
				<view v-if="richText.platform==0" style="display: flex;align-items: center;flex-wrap: wrap;">
					<image class="images" v-for="it,i in images" :src="$IMG_URL+it" mode=""></image>
				</view>
				<view v-if="richText.platform==0" style="margin-top: 20px;">
					<video style="width: 100%;" :src="$IMG_URL+richText.video"></video>
				</view>

			</view>
		</view>
		<view v-if="richText.platform==1" class="OpenInAppButton is-higher css-jx25g">
			<button type="button" class="css-1hsfju4" @tap="jump('/pages/news/work')">支付300积分参加活动</button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				richText: '',
				images: [],
			};
		},
		computed: {},
		onLoad() {
			this.$Route.query.id && this.getRichText();
		},
		methods: {

			getRichText() {
				if (this.$Route.query.platform == 0) {
					this.$http('activity.share_detail', {
						id: this.$Route.query.id
					}).then(res => {
						if (res.code === 1) {
							this.richText = res.data;
							this.images = res.data.images.split(',')
							console.log(this.images);

						}
					});
				} else {
					this.$http('activity.detail', {
						id: this.$Route.query.id
					}).then(res => {
						if (res.code === 1) {
							this.richText = res.data;

						}
					});
				}

			},
			jump(path, query) {
				this.$http('activity.apply', {
					id: this.$Route.query.id
				}).then(res => {
					if (res.code === 1) {
						this.$Router.push({
							path: path,
							query: query
						});
					}
				});


			}
		}
	};
</script>

<style lang="scss">
	.images {
		margin-top: 10px;
		width: calc((100% - 45px)/4);
		height: 80px;
		margin-right: 15px;
		&:nth-child(4n){
			margin-right: 0px;
		}
	}

	.rich-wrap {
		padding: 30rpx;
		background: #fff;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #21201E;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.info {
			text-align: center;
			font-size: 24rpx;
			color: #707070;
			margin-bottom: 30rpx;
		}
	}

	.css-jx25g {
		position: fixed;
		display: flex;
		justify-content: center;
		top: auto;
		left: 60rpx;
		bottom: 60rpx;
		width: calc(-120rpx + 100vw);
		z-index: 1;
		pointer-events: none;
	}

	.OpenInAppButton.is-higher {
		margin-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.css-1hsfju4 {
		display: inline-block;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		color: #fff;
		text-align: center;
		cursor: pointer;
		background: #E77817;
		border: 1px solid #E77817;
		font-size: 28rpx;
		border-radius: 50rpx;
		pointer-events: auto;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #E77817;
			border-radius: 50rpx;
			opacity: 0;
			transition: opacity 0.3s ease-in-out;
		}

		&:hover::after {
			display: none;
		}
	}
</style>